<template>
<div>
    <nav-bar>
        <template v-slot:dedault>新用户注册</template>
    </nav-bar>
    <div style="margin-top:50px;padding-top:40px;">
        <div style="text-align: center;">
            <van-image 
                width="10rem"
                height="10rem"
                fit="contain"
                src="https://ts1.cn.mm.bing.net/th/id/R-C.a266002281783c4f91945b125c395dc4?rik=0LvPjyhfF89mSQ&riu=http%3a%2f%2fpic.616pic.com%2fys_bnew_img%2f00%2f07%2f03%2f8c7hBGzTVK.jpg&ehk=vRz331CWilgQSMor9H8bq9ZrUYBzMTGHgcI23h%2brhU0%3d&risl=&pid=ImgRaw&r=0"
            />
        </div>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field
                v-model="name"
                name="用户名"
                label="用户名"
                placeholder="用户名"
                :rules="[{required:true,message:'请填写用户名'}]"
                />
                <van-field
                v-model="password"
                type="password"
                name="确认密码"
                label="确认密码"
                placeholder="确认密码"
                :rules="[{required:true,message:'请填密码'}]"
                />
                <van-field
                v-model="password_confirmation"
                type="password"
                name="确认密码"
                label="确认密码"
                placeholder="确认密码"
                :rules="[{required:true,message:'请填写一致密码'}]"
                />
                
                <van-field
                v-model="email"
               
                name="电子邮箱"
                label="电子邮箱"
                placeholder="电子邮箱"
                :rules="[{required:true,message:'请填写正确电子邮件格式'}]"
                />
                
            </van-cell-group>
           <div style="margin: 16px;">
                <van-button round block type="success" native-type="submit">
                    提交
                </van-button>
        </div>
            
          
        </van-form>
    </div>
</div>

</template>
<script>
import NavBar from '@/components/common/NavBar/NavBar.vue';
import { Register } from '@/network/user';
import router from '@/router';
import { Notify,Toast } from 'vant';
import {ref,reactive,toRefs} from "vue"
export default{
    name:"Register",
    components:{
        NavBar
    },
    setup(){
        const userinfo=reactive({
            name:"",
            password:"",
            password_confirmation:"",
            email:""
        })
        const onSubmit=()=>{
            console.log('1111');
            // 先验证
            if(userinfo.password!=userinfo.password_confirmation){
                Notify({type:'success',message:'两次密码不一致'})
                // 提交给服务器
            }else{
                Register(userinfo).then(res=>{
                    console.log(res);
                    if(res.status=='201'){
                        Toast.success('注册成功')
                        setTimeout(()=>{
                         router.push({path:'/login'})
                        },1000)
                        
                    }
                    userinfo.password_confirmation=''
                    userinfo.password=''
                })
               
            }
        }
        return{
            ...toRefs(userinfo),
            onSubmit,
        }
    }
}
</script>